<template>
	<yd-layout id='courseClassical' class=''>
		<div class="header" slot='top'>
			<div @click="navActive(1)" :class="activeNum==1?'header_active':''" class="header_lsit">
				<div>课程列表</div>
				<span></span>
			</div>
			<div @click="navActive(2)" :class="activeNum==2?'header_active':''" class="header_lsit">
				<div>学习进度</div>
				<span></span>
			</div>
		</div>
		<div class="content">
			<div class="course_list" v-show="activeNum==1">
				<yd-infinitescroll v-show='courseList.length>0' :callback="getCourseList" ref="infinitescrollDemo">
					<CourseClassicalList slot="list" @courseClick='courseClick_course' :dataList='courseList'></CourseClassicalList>
					<!-- 数据全部加载完毕显示 -->
			        <span slot="doneTip">没有更多数据了~~</span>
			
			        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
			        <!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
				</yd-infinitescroll>
				
			</div>
			<NoList v-show='courseList.length==0&&activeNum==1'>
				<img slot='img' src="../../assets/kong_2.png" alt="" />
			</NoList>
			<div class="study_list" v-show="activeNum==2">
				<div v-show='historyList.length>0' >
					<!--<div v-if="historyList[0]" class="study_lately">最近一次学习</div>
					<div v-if="historyList[0]" class="study_list_c study_list_c_bottom">
						<CourseClassicalList type='study' :dataList='[historyList[0]]'></CourseClassicalList>
					</div>
					<div class="study_lately">历史学习记录</div>-->
					<div class="study_list_c">
						<yd-infinitescroll :callback="getHistoryList" ref="infinitescrollDemoHistory">
							<CourseClassicalList slot="list" @courseClick='courseClick_course_1' type='study' :dataList='historyList'></CourseClassicalList>
							<!-- 数据全部加载完毕显示 -->
					        <span slot="doneTip">没有更多数据了~~</span>
					
					        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
					        <!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
						</yd-infinitescroll>
					</div>
				</div>
			</div>
			<NoList v-show='historyList.length==0&&activeNum==2'>
				<img slot='img' src="../../assets/kong_2.png" alt="" />
			</NoList>
		</div>
		<yd-backtop></yd-backtop>
	</yd-layout>
</template>

<script>
	import CourseClassicalList from '../../components/CourseClassicalList/CourseClassicalList.vue'
	import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';
	import {BackTop} from 'vue-ydui/dist/lib.rem/backtop';
	export default {
		components: {
			[CourseClassicalList.name]:CourseClassicalList,
			[InfiniteScroll.name]:InfiniteScroll,
			[BackTop.name]:BackTop,
		},
		data() {
			return {
				activeNum: 1,
				
				courseList:[],
				pageNum_course:1,
				pageCount_course:10,
				
				pageNum_history:1,
				pageCount_history:10,
				historyList:[],
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			document.title = '精品课';
			this.getCourseList();
			this.getHistoryList();
		},
		methods: {
			getCourseList(){
				this.$root.ajax({
					name:'hqc/courses',
					type:"get",
					params:{
						page:this.pageNum_course,
						count:this.pageCount_course,
					}
				}).then((d)=>{
					
					this.courseList = [...this.courseList, ...d.data.course_list];
                    if (this.courseList.length >= d.data.course_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum_course++;
				})
			},
			getHistoryList(){
				this.$root.ajax({
					name:'hqc/history',
					type:'get',
					params:{
						page:this.pageNum_history,
						count:this.pageCount_history,
					}
				}).then((d)=>{
					
					this.historyList = [...this.historyList, ...d.data.course_list];
					
                    if (this.historyList.length >= d.data.course_count ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemoHistory.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemoHistory.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum_history++;
				})
			},
			async courseClick_course_1(item){
				item.isNoRouter = true
				var data = await this.$root.hqcPlayFlg(item);
				
				this.$router.push({
					name:'courseDetail',
					query:{
						id:item.cid
					}
				})
			},
			async courseClick_course(item){
				item.isNoRouter = true
				var data = await this.$root.hqcPlayFlg(item);
				this.$router.push({
					name:'courseDetail',
					query:{
						id:item.id
					}
				})
			},
			navActive(num) {
				this.activeNum = num
			}
		}
	}
</script>

<style lang="scss">
	@import './courseClassical.scss';
</style>